<script>
import { computed, onMounted, ref, watch } from 'vue';
import { debounce } from 'lodash';
import { getAllUser } from "../assets/api/login";

export default {
    setup() {
        const search = ref('');
        const tableData = ref([]);

        // 计算属性，用于过滤数据
        const filteredTableData = computed(() => {
            const query = search.value.toLowerCase();
            if (!query) {
                return tableData.value; // 如果搜索值为空，返回原始数据
            }
            return tableData.value.filter(item => {
                return (item.username?.toLowerCase?.().includes(query)) ||
                    (item.name?.toLowerCase?.().includes(query)) ||
                    (item.email?.toLowerCase?.().includes(query));
            });
        });

        //编辑
        const handleEdit = (index, row) => {
            console.log(index, row);
        };
        //删除
        const handleDelete = (index, row) => {
            console.log(index, row);
        };

        // 使用防抖函数来优化搜索输入
        const debouncedSearch = debounce((newSearch) => {
            search.value = newSearch;
        }, 300);

        // 监听 search 的变化
        watch(search, (newSearch) => {
            debouncedSearch(newSearch);
        });

        onMounted(() => {
            getAllUser().then(res => {
                console.log("请求到的数据====>", res.data);
                tableData.value = res.data.map(item => ({
                    ...item,
                    date_joined: (item.date_joined || '').split('T')[0],
                    last_login: (item.last_login || '').split('T')[0]
                }));
                console.log("修改后的数据====>", tableData.value);
            }).catch(error => {
                console.error('请求失败', error);
            });
        });

        return {
            search,
            filteredTableData,
            handleEdit,
            handleDelete,
        };
    },
};
</script>

<template>
    <el-table :data="filteredTableData" style="width: 100%">
        <el-table-column label="账号" prop="username" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="激活" prop="is_active" />
        <el-table-column label="是否管理员" prop="is_superuser" />
        <el-table-column label="IP地址" prop="ip_address" />
        <el-table-column label="注册时间" prop="date_joined" />
        <el-table-column label="最后登录时间" prop="last_login" />

        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="查找用户名" />
            </template>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<style lang="scss" scoped></style>